<!-- 所有评论 -->
<template>
	<view class="eva-content" v-for="(item,index) in eva_data" :key="index">
		<view class="eva-top">
			<!-- 头像 -->
			<view>
				<image :src="item.avatarUrl" mode="aspectFill"></image>
			</view>
			<!-- 名字、评分、规格 -->
			<view class="eva-name">
				<view>
					<text>{{item.nickName}}</text>
					<uni-rate :value="item.rate" allow-half readonly="true"/>
				</view>
				
				<view class="eva-specs">
					<text v-if="item.specs?.length > 0" v-for="(item2,index2) in item.specs" :key="index2">{{item2.att_val}}</text>
				</view>
				
			</view>
			
			<!-- 时间 -->
			<view class="eva-time">{{item.time}}</view>
		</view>

		<!-- 评价内容 -->
		<view class="eva-text">{{item.eva_text}}</view>
		<view class="eva-image" v-if="item.eva_image.length > 0">
			<view v-for="(item2,index2) in item.eva_image" :key="index2">
				<image :src="item2.image" mode="aspectFill"></image>
			</view>
		</view>
	</view>
	<!-- 没有数据的提示 -->
	<view class="tips" v-if="eva_data.length == 0">该商品还没有评价</view>

	<!-- 上拉加载的提示 -->
	<view class="loading-height">
		<Loading v-if="loading"></Loading>
	</view>
</template>

<script setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app'
	import { ref, reactive, toRefs } from 'vue'
	import Loading from '../../components/loading.vue'

	const data = reactive({
		goods_id: '17d0551d63d7779b01168674493440db', // 评价的商品id
		eva_data: [], //评价数据
		loading: false, // 上拉加载小圆圈
		pageNum: 0, // 请求的页数，每请求一次，页数 +1
		rate_value:0   // 评分
	})

	const { eva_data,rate_value } = toRefs(data)

	// 1、获取上个页面传递的值
	onLoad((event) => {
		data.goods_id = event.goods_id
		getData(0)
	})


	// 2、获取该商品的所有评论
	const db = wx.cloud.database()
	async function getData(skip) {
		const res = await db.collection('goods_comment').where({
			goods_id: data.goods_id
		}).limit(10).skip(skip).get()
		console.log("reres",res)
		data.eva_data = [...data.eva_data, ...res.data]
	}

	// 3、上拉加载
	onReachBottom(async () => { //onReachBottom只能在父组件才能触底
		data.loading = true
		dat.pageNum++
		let skip = data.pageNum * 10
		await getData(skip)
		data.loading = false
	})
</script>

<style scoped>
	/* 用户评价 */
	.eva-content {
		margin: 40rpx 20rpx;
	}

	/* 评价头部 */
	.eva-top {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.eva-top image {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
	}

	.eva-top text {
		display: block;
	}

	/* 评价名字，评分、规格 */
	.eva-name {
		flex: 1;
		padding: 0 12rpx;
	}
	
	.eva-name view:nth-child(1){
		display: flex;
	}

	.eva-specs{
		font-size: 26rpx;
		color: #8a8b90;
	}

	/* 评价时间 */
	.eva-time {
		align-self: flex-start;
		color: #8a8b90;
		font-size: 26rpx;
	}

	/* 评论内容 */
	.eva-text {
		line-height: 1.3;
		margin: 20rpx 0;
	}

	.eva-image {
		display: flex;
		flex-wrap: wrap;
	}

	.eva-image image {
		width: 100%;
		height: 200rpx;
		border-radius: 5rpx;
		display: block;
	}

	.eva-image view {
		width: calc(33.3% - 5rpx*2);
		margin: 5rpx;
	}
</style>
